<!--***************使用组件方法的过程******************-->
<!--1-通过import引入组件-->
<!--2-通过component:{}注册组件-->
<!--3-通过<标签></标签>引用组件-->
<!--4-通过data(){属性名:值}初始化组件属性-->
<!--5-在method:{}中注册组件的事件调用的函数方法-->
<!--6-通过外部按钮等的事件调用修改组件属性的函数方法-->
<!--7-通过import引用外部API接口-->

<template>
  <div>
    <Card>
      <Form ref="UserData" :inline="true" :model="UserData" :label-width="100">
        <row>
          <i-col span="24">
            <Button
              @click="showAdd()"
              style="margin-left: 0px"
              type="info"
              icon="ios-add"
              >新增部门</Button
            >
            <Button
              @click="handleDelete()"
              type="warning"
              icon="ios-trash-outline"
              >删除</Button
            >
            <Button
              @click="handleRefresh()"
      
              type="success"
              icon="ios-refresh"
              >刷新</Button
            >
            <Button @click="handleSearch()" type="primary" icon="ios-search"
              ghost>查询</Button
            >
            <Input
              v-model="searchForm.CompanyName"
              clearable
              @on-change="handleClear"
              placeholder="请输入部门名称"
              class="search-input"
            />
            <Input
              v-model="searchForm.CompanyLinkman"
              clearable
              @on-change="handleClear"
              placeholder="请输部门入联系人"
              class="search-input"
            />
          </i-col>
        </row>
      </Form>
      <tables
        ref="tables"
        editable
        searchable
        search-place="top"
        v-model="tableData"
        :columns="columns"
        :pageTotal="pageTotal"
        :page="page"
        :border="border"
        :stripe="stripe"
        :rows="rows"
        :loading="loading"
        @on-PageSize="changePageSize"
        @on-change="changePage"
        @on-delete="handleDelete"
        @on-selection-change="onSelect"
      />
      <Button style="margin: 10px 0" type="primary" @click="exportExcel"
        >导出为Csv文件</Button
      >

      <!--3-使用Detail组件-->
      <Detail
        v-if="viewAccessAll"
        v-bind:visible="visible"
        v-bind:DeptData="DeptData"
        @cancelCallBack="shutDetailModal"
      ></Detail>
      <!--3-使用Edit组件-->
      <Edit
        v-if="viewAccessSuper"
        v-bind:edit="edit"
        v-bind:DeptData="DeptData"
        @success="editSuccess"
        @cancelCallBack="shutEditModal"
      ></Edit>
      <!--3-使用Add组件-->
      <Add
        v-if="viewAccessSuper1"
        v-bind:add="add"
        v-bind:DeptData="DeptData"
        @success="success"
        @cancelCallBack="shutAddModal"
      ></Add>
    </Card>
    <Modal
      v-model="viewAccessSuper2"
      title="提示"
      @on-cancel="handleDeleteCanel"
      @on-ok="handleDeleteOk"
    >
      <h2>您确定要删除数据吗？</h2>
    </Modal>
  </div>
</template>


<script>
import Tables from "_c/tables"; //1-引入Tables组件
import Detail from "./dept_detail.vue"; //1-引入Detail组件
import Edit from "./dept_edit.vue"; //1-引入Edit组件
import Add from "./dept_add.vue"; //1-引入UserAdd组件
import { getAllDepts, getOneDept, searchDeptData } from "@/api/data";
export default {
  name: "tables_page",
  components: {
    //注册组件
    Tables, //2-将引入的Tables组件进行注册
    Detail, //2-将引入的Detail组件进行注册
    Edit, //2-将引入的Edit组件进行注册
    Add, //2-将引入的Add组件进行注册
  },
  data() {
    return {
      //4-初始化组件属性值
      pageTotal: 100,
      page: 1,
      rows: 10,
      loading: false,
      border: true,
      stripe: true,
      viewAccessAll: false,
      viewAccessSuper: false,
      viewAccessSuper1: false,
      viewAccessSuper2: false,
      edit: true,
      visible: true,
      selRows: [],
      add: true,
      searchForm: {
        searchValue: "",
        searchKey: "DeptName",
      },
      DeptData: {
       
      },
      columns: [
        { type: "selection", width: 60, align: "center" },
        { title: "ID", key: "Id", width: 70, align: "center", sortable: true },
        { title: "部门名称", key: "DeptName", align: "center", editable: true },
        { title: "部门联系人", key: "DeptLinkman", align: "center" },
        { title: "部门电话", key: "DeptTelephone", align: "center" },
        { title: "部门地址", key: "DeptAddr", align: "center" },

        {
          title: "操作",
          key: "action",
          width: 180,
          align: "center",

          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      //6-通过按钮的单击事件---修改组件属性及调用相关函数方法
                      this.viewAccessAll = true;
                      this.visible = true;
                      this.deptId = params.row.Id;
                      this.getDept();
                    },
                  },
                },
                "详情"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.viewAccessSuper = true;
                      this.edit = true;
                      this.deptId = params.row.Id;
                      console.log("打印行号", this.deptId);
                      this.getDept();
                    },
                  },
                },
                "编辑"
              ),
            ]);
          },
        },
      ],

      tableData: [],
    };
  },
  methods: {
    onSelect(row) {
      this.selRows = row;
      console.log(row);
    },
    //  删除事件
    handleDelete() {
      console.log(this.selRows);
      if (this.selRows.length > 0) {
        this.viewAccessSuper2 = true;
      } else {
        this.$Message.success("请选择要删除的记录");
      }
    },
    handleDeleteCanel() {},
    handleDeleteOk() {
      let data = {
        id: this.selRows[0].Id,
      };
      DeleteInfo(data)
        .then((res) => {
          if (res == "OK") {
            this.$Message.success("删除成功");
            this.loading = false;
            this.handleRefresh();
          }
        })
        .catch((error) => {
          this.$Message.error("请核对之后重新提交");
          this.loading = false;
        });
      this.viewAccessSuper = false;
    },
    handelClear() {},

    handleClear() {},
    //刷新列表
    handleRefresh() {
      this.searchForm.searchValue = "";
      this.page = 1;
      const data = {
        page: this.page,
        rows: this.rows,
        searchKy: this.searchForm.searchKey,
        searchVal: this.searchForm.searchValue,
      };
      searchDeptData(data).then((res) => {
        this.tableData = res.List;
        this.pageTotal = res.Total;
        console.log(res.data);
      });
    },

    //按条件查询用户信息
    handleSearch() {
      this.page = 1;
      const data = {
        page: this.page,
        rows: this.rows,
        searchKy: this.searchForm.searchKey,
        searchVal: this.searchForm.searchValue,
      };
      searchDeptData(data).then((res) => {
        this.tableData = res.List;
        this.pageTotal = res.Total;
        console.log(res.data);
      });
    },

    //页码改变：按页码 + 每页行数 + 上面查询条件组合查询
    changePage(val) {
      console.log("改变了页码：", val);
      this.page = val;
      const data = {
        page: this.page,
        rows: this.rows,
        searchKy: this.searchForm.searchKey,
        searchVal: this.searchForm.searchValue,
      };
      searchDeptData(data).then((res) => {
        this.tableData = res.List;

        console.log(res.data);
      });
    },

    //每页行数改变：按页码 + 每页行数 + 上面查询条件组合查询
    changePageSize(val) {
      console.log("改变每页条数：", val);
      this.rows = val;
      const data = {
        page: this.page,
        rows: this.rows,
        searchKy: this.searchForm.searchKey,
        searchVal: this.searchForm.searchValue,
      };
      searchUserData(data).then((res) => {
        this.tableData = res.List;

        console.log(res.data);
      });
    },

    showAdd() {
      //6-通过按钮的单击事件---修改组件属性及调用相关函数方法--弹出界面
      this.viewAccessSuper1 = true;
      this.add = true;
      console.log("弹出增加对话框");
      //this.getUserEmpt();
    },

    shutDetailModal(data) {
      //5-将modal对话框的visible属性通过on-cancel事件设置为false
      this.visible = data.mode;
    },
    shutEditModal(data) {
      //5-modal对话框的visible属性通过on-cancel事件设置为false
      this.edit = data.mode;
    },
    shutAddModal(data) {
      //5-modal对话框的visible属性通过on-cancel事件设置为false
      this.add = data.mode;
    },
    //添加用户信息成功
    success(data) {
      this.add = data.mode;
      const para = {
        page: this.page,
        rows: this.rows,
      };
      getAllDepts(para).then((res) => {
        this.tableData = res.List;
        this.pageTotal = res.Total;
        console.log(res.List);
      });
    },
    //修改用户信息成功
    editSuccess(data) {
      this.edit = data.mode;
      const para = {
        page: this.page,
        rows: this.rows,
      };
      getAllDepts(para).then((res) => {
        this.tableData = res.List;
        this.pageTotal = res.Total;
        console.log(res.List);
      });
    },

    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`,
      });
    },

    //按ID获取单个用户信息
    getDept() {
      getOneDept({
        deptId: this.deptId,
      }).then((res) => {
        this.DeptData = res.User;
        console.log("返回:", this.DeptData);
      });
    },
  },

  //打开页面后自动加载方法列表
  mounted() {
    getAllDepts().then((res) => {
      this.tableData = res.List;
      this.pageTotal = res.Total;
      console.log(res.List);
    });
  },
};
</script>

<style>
.search {
  margin-bottom: 10px;
  margin-left: 0px;
}
.search-col {
  display: inline-block;
  width: 200px;
}

.search-input {
  display: inline-block;
  width: 200px;
  margin-left: 2px;
}

.search-btn {
  margin-left: 50px;
  width: 80px;
}
</style>
